// 透明玻璃对话框样式模板
// 使用方法：在组件中添加 custom-class="glass-dialog"

/* 透明玻璃对话框 - 最高优先级样式 */
.glass-dialog,
.el-dialog.glass-dialog {
  background: rgba(255, 255, 255, 0.02) !important;
  background-color: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(15px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.6),
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 10px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02) !important;
  position: relative !important;
  overflow: visible !important;

  /* 跑马灯边框效果 */
  &::before {
    content: '' !important;
    position: absolute !important;
    top: -3px !important;
    left: -3px !important;
    right: -3px !important;
    bottom: -3px !important;
    border-radius: 27px !important;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.6),
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.6)) !important;
    background-size: 200% 100% !important;
    animation: glass-border-flow 3s linear infinite !important;
    pointer-events: none !important;
    z-index: -1 !important;
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0) !important;
    mask-composite: xor !important;
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    padding: 3px !important;
  }

  /* 对话框头部样式 */
  .el-dialog__header {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 25px 30px 20px !important;

    .el-dialog__title {
      color: rgba(255, 255, 255, 0.9) !important;
      font-size: 20px !important;
      font-weight: 600 !important;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
    }

    .el-dialog__headerbtn {
      .el-dialog__close {
        color: rgba(255, 255, 255, 0.6) !important;
        font-size: 18px !important;
        transition: all 0.3s ease !important;

        &:hover {
          color: rgba(255, 255, 255, 0.9) !important;
          transform: scale(1.1) !important;
        }
      }
    }
  }

  /* 对话框主体样式 */
  .el-dialog__body {
    padding: 20px 30px !important;
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;

    .el-form {
      background: transparent !important;
      background-color: transparent !important;

      .el-form-item {
        background: transparent !important;
        background-color: transparent !important;
        position: relative !important;
        margin-bottom: 24px !important;

        .el-form-item__label {
          color: rgba(255, 255, 255, 0.8) !important;
          font-weight: 500 !important;
        }
      }
    }

    // 描述组件样式
    .el-descriptions,
    .el-descriptions *,
    .el-descriptions__content,
    .el-descriptions__label,
    .el-descriptions__cell,
    .el-descriptions__table,
    .el-descriptions__body,
    .el-descriptions__header,
    .el-descriptions-item,
    .el-descriptions-item__content,
    .el-descriptions-item__label {
      background: transparent !important;
      background-color: transparent !important;
      color: rgba(255, 255, 255, 0.9) !important;
    }
  }

  /* 对话框底部样式 */
  .el-dialog__footer {
    padding: 20px 30px 25px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
    background-color: transparent !important;

    .el-button {
      background: rgba(255, 255, 255, 0.05) !important;
      background-color: rgba(255, 255, 255, 0.05) !important;
      border: 1px solid rgba(255, 255, 255, 0.15) !important;
      color: #ffffff !important;
      backdrop-filter: blur(10px) !important;
      border-radius: 6px !important;
      transition: all 0.3s ease !important;

      &:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(0, 234, 255, 0.4) !important;
        box-shadow: 0 0 15px rgba(0, 234, 255, 0.2) !important;
        transform: translateY(-1px) !important;
      }

      &.el-button--primary {
        background: linear-gradient(135deg, #0ea5e9 0%, #00eaff 50%, #3b82f6 100%) !important;
        background-color: transparent !important;
        border-color: rgba(0, 234, 255, 0.3) !important;

        &:hover {
          background: linear-gradient(135deg, #0284c7 0%, #33f1ff 50%, #2563eb 100%) !important;
          background-color: transparent !important;
          box-shadow: 0 0 25px rgba(0, 234, 255, 0.5) !important;
        }
      }
    }
  }
}

/* 跑马灯边框动画 */
@keyframes glass-border-flow {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 200% 0%;
  }
}

/* 透明玻璃登录框样式模板 */
.glass-login-box {
  position: relative;
  z-index: 2;
  width: 420px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border-radius: 24px;
  padding: 45px 40px;
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.6),
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 10px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform-style: preserve-3d;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible;

  // 跑马灯边框效果
  &::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 27px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.6),
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.6));
    background-size: 200% 100%;
    animation: glass-border-flow 3s linear infinite;
    pointer-events: none;
    z-index: -1;
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    padding: 3px;
  }

  &:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
      0 50px 150px rgba(0, 0, 0, 0.7),
      0 25px 80px rgba(0, 0, 0, 0.5),
      0 15px 40px rgba(0, 0, 0, 0.4),
      inset 0 2px 0 rgba(255, 255, 255, 0.1),
      inset 0 -2px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(-3px);
  }
}

/* 表格透明玻璃样式扩展 */
.glass-dialog.el-table {
  background: rgba(255, 255, 255, 0.01) !important;
  background-color: rgba(255, 255, 255, 0.01) !important;
  backdrop-filter: blur(10px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 20px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  overflow: hidden !important;

  // 确保表格头部圆角
  .el-table__header-wrapper {
    border-radius: 20px 20px 0 0 !important;
    overflow: hidden !important;
  }

  // 确保表格主体圆角
  .el-table__body-wrapper {
    border-radius: 0 0 20px 20px !important;
    overflow: hidden !important;
  }

  // 表格头部样式
  .el-table__header {
    background: rgba(255, 255, 255, 0.02) !important;
    background-color: rgba(255, 255, 255, 0.02) !important;

    th {
      background: transparent !important;
      background-color: transparent !important;
      color: rgba(0, 234, 255, 0.9) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
      font-weight: 600 !important;
      text-shadow: 0 0 8px rgba(0, 234, 255, 0.3) !important;

      // 第一个和最后一个头部单元格的圆角
      &:first-child {
        border-top-left-radius: 20px !important;
      }

      &:last-child {
        border-top-right-radius: 20px !important;
      }
    }
  }

  // 表格行样式
  .el-table__body {
    tr {
      background: transparent !important;
      background-color: transparent !important;

      &:hover {
        background: rgba(255, 255, 255, 0.03) !important;
        background-color: rgba(255, 255, 255, 0.03) !important;
      }

      td {
        background: transparent !important;
        background-color: transparent !important;
        color: rgba(255, 255, 255, 0.85) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
      }
    }

    .el-table__row--striped {
      background: rgba(255, 255, 255, 0.01) !important;
      background-color: rgba(255, 255, 255, 0.01) !important;

      td {
        background: transparent !important;
        background-color: transparent !important;
      }
    }
  }

  // 表格边框
  &.el-table--border {
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
  }

  // 空数据样式
  .el-table__empty-block {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.6) !important;
  }
}